<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <!-- 通过条件判断要显示什么内容 -->
        <p v-if="name == 'h5-2307'">你们真好看</p>
        <!-- <span></span> -->
        <p v-else-if="name == 'h5-2308'">你们一般</p>
        <p v-else>你们啥也不是</p>


        <button @click="isShow = !isShow">切换显示</button>
        <!-- 虽然外面套一个 div 可以更方便，但是会多出一个 div 标签 -->
        <!-- <div v-if="isShow">
            <h1>这个是 h1</h1>
            <h2>这个是 h2</h2>
            <h3>这个是 h3</h3>
            <h4>这个是 h4</h4>
            <h5>这个是 h5</h5>
            <h6>这个是 h6</h6>
        </div> -->

        <!-- template 是一个空标签，不会被渲染到页面中 -->
        <template v-if="isShow">
            <h1>这个是 h1</h1>
            <h2>这个是 h2</h2>
            <h3>这个是 h3</h3>
            <h4>这个是 h4</h4>
            <h5>这个是 h5</h5>
            <h6>这个是 h6</h6>
        </template>


        <hr>

        <!-- v-show 也可以实现标签的显示隐藏，通过 display: none; 实现显示隐藏的 -->
        <h1 v-show="isShow"> 你好 Vue </h1>

        <!-- 
            因为 template 是一个空标签不会被渲染到页面中，所以它不是一个 DOM 元素
            所以无法使用 CSS 进行隐藏，所以就无法使用 v-show
        -->
        <!-- <template v-show="isShow">
            <h1>这个是 h1</h1>
            <h2>这个是 h2</h2>
            <h3>这个是 h3</h3>
            <h4>这个是 h4</h4>
            <h5>这个是 h5</h5>
            <h6>这个是 h6</h6>
        </template> -->

        <!-- 
            v-if:
                通过添加或者移除一个元素，来进行显示和隐藏
                据有惰性的，默认条件不成立的时候，不会做渲染
                不频繁切换显示的时候可以使用 v-if

            v-show:
                通过修改 CSS 样式实现显示隐藏
                非惰性，不管你的默认条件是否成立，该元素都会被渲染出来
                当频繁切换显示的时候可以使用 v-show 


            v-if 和 v-for​ 能在一起使用，但是不建议一起使用
                因为两者的优先级不一样
                在 Vue3 中 v-if 的优先级更高
                在 Vue2 中 v-for 的优先级更高
         -->

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                name: 'h5-2307',
                isShow: true
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>